shlinkio / shlink-web-client

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faSearch as searchIcon } from '@fortawesome/free-solid-svg-icons';

import PropTypes from 'prop-types';

import classnames from 'classnames';

import './SearchField.scss';

const DEFAULT_SEARCH_INTERVAL = 500;

export default class SearchField extends React.Component {

  static propTypes = {

    onChange: PropTypes.func.isRequired,

    className: PropTypes.string,

    placeholder: PropTypes.string,

  };

  static defaultProps = {

    className: '',

    placeholder: 'Search...',

  };

  state = { showClearBtn: false, searchTerm: '' };

  timer = null;

  searchTermChanged(searchTerm, timeout = DEFAULT_SEARCH_INTERVAL) {

    this.setState({

      showClearBtn: searchTerm !== '',

      searchTerm,

    });

    const resetTimer = () => {

      clearTimeout(this.timer);

      this.timer = null;

    };

    resetTimer();

    this.timer = setTimeout(() => {

      this.props.onChange(searchTerm);

      resetTimer();

    }, timeout);

  }

  }

}